:global(:root) {
  --skeleton-box-background: var(--background-base);
  --skeleton-box-border-color: var(--background-highlight);
  --skeleton-box-gradient-stop-color: var(--background-highlight);
}

.skeleton-box {
  display: inline-block;
  vertical-align: middle;
  background: var(--skeleton-box-background);
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
  border: 1px solid var(--skeleton-box-border-color);

  &:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      var(--skeleton-box-gradient-stop-color) 30%,
      var(--skeleton-box-gradient-stop-color) 60%,
      transparent
    );
    transform: translateX(-100%);
    animation: skeleton-box-movement 1.5s infinite;
  }
}

@keyframes skeleton-box-movement {
  100% { transform: translateX(100%); }
}